<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">地区管理</span>
        </el-col>
      </el-row>
    </div>
    <div class="district">
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
        </el-col>
        <el-col :span="7">
          <el-row style="margin-top: 11px;" class="btn" type="flex" justify="space-between">
            <el-col :span="10" :offset="4">
              <el-input
                size="small"
                placeholder="查找"
                style="width: 146px;"
                @keyup.enter.native="search"
                v-model.trim='searchword'
              >
                <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="search"></i>
              </el-input>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-button class="add" :class="{'active' : newcolor}" size="small" @mousedown.native="adddown"
                         @mouseup.native="addup" @click="addshow" round>新增
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-row :gutter="50">
            <el-col :md="6" :lg='6' :xl="4" v-for="(item,index) in list" :key="index">
              <div class="box">
                <el-row class="roletitle">
                  <el-col :span="10" :offset="1">
                    <p
                      style="width: 95px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: inline-block;">
                      {{item.name}}
                    </p>
                  </el-col>
                  <el-col :span="4" :offset="8">
                    <div class="operation">
                      <i class="iconfont icon-xiugai" @click="edit(item.id)"></i>
                      <i class="iconfont icon-shanchu" @click="dele(item.id)"></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="districtel">
                  <el-col :span="10" :offset="1" style="height: 24px;line-height: 24px;">
                    <i class="iconfont icon-quhao"></i>
                    <div style="display: inline-block;">
                      <span>区号</span>
                    </div>
                  </el-col>
                  <el-col :span="2" :offset="8">
                    <p>{{item.areaNo}}</p>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="新增区域"
      :visible.sync="dialogVisible"
      width="415px"
      :before-close="addClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="addform" :model="addform" :rules="rules" style="padding:0px 50px;">
          <el-form-item prop="name" label="地域名称">
            <el-input placeholder="请输入地域名称" v-model.trim="addform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="areaNo" label="地域区号">
            <el-col>
              <el-input
                v-model.trim="addform.areaNo"
                placeholder="请输入地域区号"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="adddis" round @click="send('addform')">确 定</el-button>
    <el-button round @click="addClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改区域"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="editClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        <el-form label-position="top" ref="editform" :model="editform" :rules="rules" style="padding:0px 50px;">
          <el-form-item prop="name" label="地域名称">
            <el-input placeholder="请输入地域名称" v-model.trim="editform.name" style="width: 274px"></el-input>
          </el-form-item>
          <el-form-item prop="areaNo" label="地域区号">
            <el-col>
              <el-input
                v-model.trim="editform.areaNo"
                placeholder="请输入地域区号"
                style="width: 274px">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="editdis" round @click="editsend('editform')">确 定</el-button>
    <el-button round @click="editClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="删除地域"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该地域吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="deldis" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
    <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  
  export default {
    name: 'districtmanage',
    data() {
      return {
        newcolor: true,
        dialogVisible: false,
        editdialogVisible: false,
        deletedialogVisible: false,
        searchword: '',
        id: '',
        list: [],
        adddis: false,
        editdis: false,
        deldis: false,
        addform: {
          id: '',
          name: '',
          areaNo: ''
        },
        editform: {
          id: null,
          name: '',
          areaNo: ''
        },
        rules: {
          'name': [
            {required: true, message: '请输入地域名称', trigger: 'blur'}
          ],
          'areaNo': [
            {required: true, message: '请输入区号', trigger: 'blur'},
            {pattern: /^[^\u4e00-\u9fa5a-zA-Z]{3,5}$/, message: '地域区号格式错误，区号长度范围为3-5个字符。', trigger: 'blur'}
          ],
        },
        errordialogVisible: false,
        errorinfo: null
      }
    },
    created() {
      this.getData();
    },
    methods: {
      //获取所有的地区数据
      getData() {
        axios.post(this.url + '/area/getList', qs.stringify({
          condition: ''
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      },
      addup() {
        this.newcolor = false;
      },
      adddown() {
        this.newcolor = true;
      },
      //显示新增弹出框
      addshow() {
        document.documentElement.style.overflow = 'hidden';
        this.dialogVisible = true;
        this.initaddData();
      },
      //初始化添加表单的input框
      initaddData() {
        this.addform = {
          id: '',
          name: '',
          areaNo: ''
        }
      },
      //关闭新增弹出框
      addClose() {
        this.$refs.addform.resetFields();
        this.adddis = false;
        this.initaddData();
        this.dialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //添加地区，发送添加请求
      send(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.adddis = true;
            axios.post(this.url + '/area/addArea', qs.stringify(this.addform)).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.message == "success") {
                  this.dialogVisible = false;
                  this.adddis = false;
                  this.getData();
                  this.initaddData();
                  document.documentElement.style.overflow = 'auto';
                }
                if (res.data.message == "已存在该地区信息") {
                  this.dialogVisible = false;
                  this.adddis = false;
                  this.errorinfo = res.data.message;
                  document.documentElement.style.overflow = 'hidden';
                  this.errordialogVisible = true;
                }
              }
            })
          }
        })
      },
      //点击编辑按钮,弹出框修改弹出框,并根据id获取对应的数据
      edit(id) {
        document.documentElement.style.overflow = 'hidden';
        this.editdialogVisible = true;
        axios.post(this.url + '/area/getAreaDetail', qs.stringify({
          id: id
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
              this.editform.id = res.data.data.id;
              this.editform.name = res.data.data.name;
              this.editform.areaNo = res.data.data.areaNo;
          }
        })
      },
      //关闭修改弹出框
      editClose() {
        this.$refs.editform.resetFields();
        this.editdis = false;
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //修改发送请求
      editsend(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editdis = true;
            axios.post(this.url + '/area/updateArea', {
              name: this.editform.name,
              areaNo: this.editform.areaNo,
              id: this.editform.id
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.message == 'success') {
                  this.$refs.editform.resetFields();
                  this.editdis = false;
                  this.editdialogVisible = false;
                  this.getData();
                  document.documentElement.style.overflow = 'auto';
                }
                if (res.data.message == "已存在该地区信息") {
                  this.$refs.editform.resetFields();
                  this.editdialogVisible = false;
                  this.editdis = false;
                  this.errorinfo = res.data.message;
                  document.documentElement.style.overflow = 'hidden';
                  this.errordialogVisible = true;
                }
              }
            })
          }
        })
      },
      //点击删除图标,弹出删除弹出框
      dele(id) {
        document.documentElement.style.overflow = 'hidden';
        this.deletedialogVisible = true;
        this.id = id;
      },
      //关闭删除弹出框
      deleteClose() {
        this.deldis = false;
        this.deletedialogVisible = false;
        this.id = '';
        document.documentElement.style.overflow = 'auto';
      },
      //发送删除请求
      deletesend() {
        this.deldis = true;
        axios.post(this.url + '/area/delArea', qs.stringify({
          id: this.id
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.deldis = false;
            this.deletedialogVisible = false;
            this.id = '';
            this.getData();
            document.documentElement.style.overflow = 'auto';
          }
        })
      },
      //搜索功能
      search() {
        axios.post(this.url + '/area/getList', qs.stringify({
          condition: this.searchword
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      },
      errorinfoClose() {
        this.errorinfo = null;
        document.documentElement.style.overflow = 'auto';
        this.errordialogVisible = false;
      },
    },
    watch: {
      'searchword': function (val) {
        if (val == '') {
          this.getData();
        }
      }
    },
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .district {
    min-height: 700px;
    background-color: #fff;
  }
  
  .box {
    width: 262px;
    height: 125px;
    border: 1px solid #ececec;
    margin-bottom: 30px;
    border-radius: 10px;
  }
  
  .roletitle {
    padding-top: 20px;
  }
  
  .roletitle p {
    color: #119aff;
    font-weight: 700;
  }
  
  .operation {
    width: 40px;
    height: 24px;
    background-color: #e4edfb;
    text-align: center;
  }
  
  .operation i {
    font-size: 14px;
    cursor: pointer;
    color: #757575;;
  }
  
  .operation i:hover {
    color: #119aff;
  }
  
  .districtel {
    margin-top: 40px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    color: #757575;
  }
  
  .districtel i {
    font-size: 26px;
  }
  
  .districtel span {
    font-size: 16px;
    position: relative;
    top: -4px;
  }
  
  .box:hover {
    border-color: transparent;
    box-shadow: 0px 0px 10px #ccc;
  }
  
  .active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }
  
  .hand {
    color: #757575;
  }
  
  .add {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  
  .add:hover {
    color: #fff !important;
  }
</style>
